function User(){
    this.seeker = false;
    this.recruiter = false;
    _thisUser = this;
    this.initAndThen = function(callback){
        Api.Get('getUserInfo', {id:Api.Params()['id']}, function(object, error){
            if(Api.isSuccess(object, error)){
                _thisUser.seeker = new Seeker(object['data'], _thisUser.getUserType(object['data']['roles']));
                if(_thisUser.isRecruiter(object['data']['roles'])){
                    Api.Get('getRecruiterInfo', {uid:Api.Params()['id']}, function(object, error){
                        if(Api.isSuccess(object, error)){
                            _thisUser.recruiter = new Recruiter(object['data']);
                            callback(_thisUser.seeker, _thisUser.recruiter);
                        }
                    });
                }else{
                    callback(_thisUser.seeker, _thisUser.recruiter);
                }
            }
        });
    }
    this.isRecruiter = function(roles){
        var isRecruiter = false;
        for(var i=0; i<roles.length; ++i){
            if(roles[i]['name'] == 'recruiter'){
                isRecruiter = true;
            }
        }
        return isRecruiter;
    }
    this.getUserType = function(roles){
        var userType = false;
        if(roles.length > 0){
            var isSeeker = false, isRecruiter = false;
            for(var i=0; i<roles.length; ++i){
                if(roles[i]['name'] == 'job_seeker'){
                    isSeeker = true;
                }
                if(roles[i]['name'] == 'recruiter'){
                    isRecruiter = true;
                }
            }
            if(isSeeker && isRecruiter){
                userType = 'seeker-recruiter';
            }
            if(isSeeker && !isRecruiter){
                userType = 'seeker';
            }
            if(!isSeeker && isRecruiter){
                userType = 'recruiter';
            }
        }
        return userType;
    }
}
function Seeker(data, userType){
    this.basicInfo = new BasicInfo(data, userType),
    this.expAndEmpInfo = false,
    this.worlExpInfo = false,
    this.eduInfo = false,
    this.resume = false,
    this.preferences = false,
    this.tasks = false,
    this.restrictions = false,
    this.history = false,
    this.notes = false,
    _thisSeeker = this;

    this.show = function(){
        var rtn = {basic: false, other:false};
        if(this.basicInfo){
            rtn['basic'] = this.basicInfo.show();
        }
        return rtn;
    }
    this.bindActionListener = function(){
        if(this.basicInfo){
            this.basicInfo.bindUpdate();
            this.basicInfo.bindUpdateCancel();
            this.basicInfo.bindUpdateSubmit();
        }
    }
}
function Recruiter(){

    this.show = function(){
        var rtn = {basic: false, other:false};
        return rtn;
    }
}



// <div class="nav-tabs-horizontal" >
//     <ul class="nav nav-tabs nav-tabs-line"  style="background: #fff;">
//         <li class="nav-item active" data-usertype="seeker" style="display: none;"><a class="nav-link" href="#" data-usertype="seeker">Jobseeker</a></li>
//         <li class="nav-item" data-usertype="recruiter" style="display: none;"><a class="nav-link" href="#" data-usertype="recruiter">Recruiter</a></li>
//     </ul>
// </div>
            
// <div class="panel">
//     <div class="panel-heading">
//         <h3 class="panel-title">Badic Info</h3>
//         <div class="panel-actions">
//             <div class="dropdown">
//                 <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" title="Edit" id="edit-user-basic-info">
//                     <i class="icon wb-pencil" aria-hidden="true"></i>
//                 </a>
//                 <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="true" id="edit-user-basic-info-cancel" title="Cancel" style="display: none;">
//                     <i class="icon wb-close" aria-hidden="true"></i>
//                 </a>
//             </div>
//         </div>
//     </div>
//     <div class="panel-body basic-info-panel basic-info-panel-active" id="seeker-basic-info-panel">
//         <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap">
//             <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
//             <div class="row row-lg">
//                 <div class="col-lg-6 form-horizontal">
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Experience Level</label>
//                         <div class="col-sm-9">
//                             <select class="form-control form-control-sm" id="user-basic-info-seeker-experience" name="xp_lvl_key" disabled>
//                                 <option value="0" selected="selected">Unknown</option>
//                                 <option value="fresh_graduate" >Fresh Graduate</option>
//                                 <option value="1_to_3_years" >1 - 3 years</option>
//                                 <option value="3_to_5_years">3 - 5 years</option>
//                                 <option value="5_to_10_years" >5 - 10 years</option>
//                                 <option value="above_10_years" >&gt; 10 years</option>
//                             </select>
//                         </div>
//                     </div>
//                 </div>
//                 <div class="col-lg-6 form-horizontal">
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Employment Status</label>
//                         <div class="col-sm-9">
//                             <select class="form-control form-control-sm" id="user-basic-info-seeker-employstatus" name="xp_lvl_key" disabled>
//                                 <option value="0" selected="selected">Unknown</option>
//                                 <option value="unemployed" >Unemployed</option>
//                                 <option value="employed">Employed</option>
//                             </select>
//                         </div>
//                     </div>
//                 </div>
//                 <div class="form-group col-lg-12 text-right padding-top-m" style="display: none;">
//                     <button type="button" class="btn btn-primary" id="edit-user-seeker-basic-submit">Submit</button>
//                 </div>
//             </div>
//         </form>
//     </div>
//     <div class="panel-body basic-info-panel" id="recruiter-basic-info-panel" style="padding-top: 0;">
//         <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap">
//             <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
//             <div class="row row-lg">
//                 <div class="col-lg-6 form-horizontal">
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Experience Level</label>
//                         <div class="col-sm-9">
//                             <select class="form-control form-control-sm" id="user-basic-info-recruiter-experience" name="xp_lvl_key" disabled>
//                                 <option value="0" selected="selected">Unknown</option>
//                                 <option value="fresh_graduate" >Fresh Graduate</option>
//                                 <option value="1_to_3_years" >1 - 3 years</option>
//                                 <option value="3_to_5_years">3 - 5 years</option>
//                                 <option value="5_to_10_years" >5 - 10 years</option>
//                                 <option value="above_10_years" >&gt; 10 years</option>
//                             </select>
//                         </div>
//                     </div>
//                 </div>
//                 <div class="col-lg-6 form-horizontal">
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Employment Status</label>
//                         <div class="col-sm-9">
//                             <select class="form-control form-control-sm" id="user-basic-info-recruiter-employstatus" name="xp_lvl_key" disabled>
//                                 <option value="0" selected="selected">Unknown</option>
//                                 <option value="unemployed" >Unemployed</option>
//                                 <option value="employed">Employed</option>
//                             </select>
//                         </div>
//                     </div>
//                 </div>
//                 <div class="form-group col-lg-12 text-right padding-top-m" style="display: none;">
//                     <button type="button" class="btn btn-primary" id="edit-user-recruiter-basic-submit">Submit</button>
//                 </div>
//             </div>
//         </form>
//     </div>
// </div>        

// <div class="panel">
//     <div class="panel-heading">
//         <h3 class="panel-title">Work Experience</h3>
//         <div class="panel-actions">
//             <div class="dropdown">
//                 <a class="panel-action" data-toggle="modal" data-target="#workExperienceModal"  href="#" aria-expanded="false" title="Add">
//                     <i class="icon wb-plus-circle" aria-hidden="true"></i>
//                 </a>
//             </div>
//         </div>
//     </div>
//     <div class="panel-body" style="max-height: 882px;overflow-y: auto;" id="user-work-experience-panel"></div>
// </div>

// <div class="panel">
//     <div class="panel-heading">
//         <h3 class="panel-title">Education Experience</h3>
//         <div class="panel-actions">
//             <div class="dropdown">
//                 <a class="panel-action" data-toggle="modal" data-target="#educationExperienceModal" href="#" aria-expanded="false" title="Add">
//                     <i class="icon wb-plus-circle" aria-hidden="true"></i>
//                 </a>
//             </div>
//         </div>
//     </div>
//     <div class="panel" style="max-height: 658px;overflow-y: auto;" id="user-education-experience-panel"></div>
// </div>
   
// <div class="panel">
//     <div class="panel-heading">
//         <h3 class="panel-title">Resume</h3>
//     </div>
//     <div class="panel-body">
//         <div id="resumeForm-form-item"  class="form-group " style="" >
//             <label for="resumeForm" class="control-label  none "></label>
//             <div>
//                 <div class="input-group input-group-file" id="resumeForm" class="" style="" >
//                     <input type="text" id="user-using-resume" class="form-control" readonly="readonly" disabled="disabled" placeholder="This user have not uploaded any resume..." value="">
//                     <span class="input-group-btn">
//                         <a id="file-user-resume-link" class="btn btn-info" target="_blank" style="display:none;">
//                             <i class="icon wb-eye" aria-hidden="true"></i>
//                         </a>
//                         <span class="btn btn-success btn-file">
//                             <i class="icon wb-upload" aria-hidden="true"></i>
//                             <input type="file" id="file-user-resume" name="resume" readonly="readonly" data-allowed-formats="pdf" />
//                         </span>
//                     </span>
//                 </div>
//                 <div id="file-user-resume-progress" class="progress" data-plugin="progress" style="height:2px;">
//                     <div class="progress-bar progress-bar-warning" role="progressbar"></div>
//                 </div>
// <script type="text/javascript">
// jQuery(function($){
//     $('#file-user-resume').fileupload({
//         type : 'POST',
//         url: API_HOSTNAMES['data_api']+'/api/v1/users/'+Api.Params()['id']+'/resume',
//         dataType: 'json',
//         start: function (e, data) {
//             $('#file-user-resume-progress .progress-bar').css('width', '0%');
//         },
//         done: function (e, data) {
//             $('#file-user-resume-link').attr('href', data.result['data']['resumes'][0]['url']).show();
//             $('#user-using-resume').val(window._sys['user']['name']+'\' resume: 【'+data.result['data']['resumes'][0]['url'].split('/').pop()+'】...');
//         },
//         progressall: function (e, data) {
//             var progress = parseInt(data.loaded / data.total * 100, 10);
//             $('#file-user-resume-progress .progress-bar').css('width', progress + '%');
//         },
//         add: function (e, data) {
//             var uploadErrors = [];
//             var acceptFileTypes = /\/(pdf)$/i;
//             if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
//                 uploadErrors.push('Resume file type error, pdf only.');
//             }
//             if (data.originalFiles[0]['size'] > 5*1024*1024) {
//                 uploadErrors.push('Resume file size error, 5MB max.');
//             }
//             if(uploadErrors.length > 0) {
//                 $.showError(uploadErrors.join("<br/>"), 400, function(){});
//             } else {
//                 data.submit();
//             }
//         }
//     });
// });
// </script>
//             </div>
//         </div>
//         <button type="button" class="btn btn-primary" id="user-resume-preview" style="display: none;">Resume Preview</button>
//         <!--<form id="resumeForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
//             <div class="col-sm-6 col-md-12">
//                 <div class="form-group">
//                     <div class="input-group input-group-file">
//                     <input type="text" class="form-control" readonly="" placeholder="pdf, jpg, word">
//                     <span class="input-group-btn">
//                       <span class="btn btn-success btn-file">
//                         <i class="icon wb-upload" aria-hidden="true"></i>
//                         <input type="file" name="" multiple="">
//                       </span>
//                     </span>
//                     </div>
//                 </div>
//             </div>
//         </form>-->
//     </div>
// </div>        

// <div class="panel">
//     <div class="panel-heading">
//         <h3 class="panel-title">Job Preference</h3>
//         <div class="panel-actions">
//             <div class="dropdown">
//                 <a class="panel-action" data-toggle="modal" data-target="#jobPerferenceModal" href="#" aria-expanded="false" title="Add">
//                     <i class="icon wb-plus-circle" aria-hidden="true"></i>
//                 </a>
//             </div>
//         </div>
//     </div>
//     <div class="panel-body" style="max-height: 640px;overflow-y: auto;" id="user-job-preference-panel"></div>
// </div>

// <div class="panel" style="display: none;">
//     <div class="panel-heading">
//         <h3 class="panel-title">Tasks</h3>
//         <!--<div class="panel-actions">
//             <div class="dropdown">
//                 <a class="panel-action" data-toggle="modal" data-target="#tasksModal" href="#" aria-expanded="false" title="Add">
//                     <i class="icon wb-plus-circle" aria-hidden="true"></i>
//                 </a>
//             </div>
//         </div>-->
//     </div>
//     <div class="panel-body">
//         <div class="list-table" style="">
//             <div class="panel" style="">
//                 <div class="panel-body">
//                     <table id="task-data-table" border="0" cellpadding="6" cellspacing="1" class="table table-bordered" style="">
//                         <thead class="list-thead">
//                             <tr>
//                                 <td class="" style="text-align:center;white-space:nowrap;" width="100" code="taskid">
//                                     <span>TaskID</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="description">
//                                     <span>Description</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="reward">
//                                     <span>Reward</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="status">
//                                     <span>Status</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="reward_status">
//                                     <span>Reward Status</span>
//                                 </td>
//                             </tr>
//                         </thead>
//                         <tbody class="list-tbody"></tbody>
//                     </table>
// <script type="text/javascript">
// $(document).ready(function() {
//     var minwidth = 0;
//     var isFixedColumns = minwidth > 0 && $('#task-data-table').width() < minwidth;
//     // console.log($('#task-data-table').width(), isFixedColumns);
//     var table = $('#task-data-table').DataTable({
//         fixedHeader:    true,
//         autoWidth: 		isFixedColumns,
//         scrollCollapse: true,
//         paging:         false,
//         info: 			false,
//         searching: 		false,
//         scrollX:        true,
//         order: 			[[0, '']],
//         columnDefs: 	[
//         {targets:'nosort', orderable:false, sSortAsc:false}
//         ]
//     }).on( 'order.dt', function () {
//         var order = table.order()[0];
//         var code  = $('thead td', this).eq(order[0]).attr('code');
//         // console.log(code);
//     });

//     if (isFixedColumns) {
//         new $.fn.dataTable.FixedColumns(table, {
//             leftColumns: 1,
//             rightColumns: 1
//         });
//     }
// });
// </script>
//                 </div>
//             </div>
//         </div>
//     </div>
// </div>

// <div class="panel" style="display: none;">
//     <div class="panel-heading">
//         <h3 class="panel-title">Restrictions</h3>
//         <div class="panel-actions">
//             <div class="dropdown">
//                 <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" title="Edit">
//                     <i class="icon wb-pencil" aria-hidden="true"></i>
//                 </a>
//             </div>
//         </div>
//     </div>
//     <div class="panel-body">
//         <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
//             <div class="row row-lg">
//                 <div class="col-lg-6 form-horizontal">
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Daily Chat Limit</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" name="daily_chat_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="daily_chat_limit">
//                             <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small>
//                         </div>
//                     </div>
//                 </div>
//                 <div class="col-lg-6 form-horizontal">
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Daily Send Resume Limit</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" name="daily_send_resume_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="daily_send_resume_limit">
//                             <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small>
//                         </div>
//                     </div>
//                 </div>
//                 <div class="form-group col-lg-12 text-right padding-top-m">
//                     <button type="submit" class="btn btn-primary" id="validateButton1">Submit</button>
//                 </div>
//             </div>
//         </form>
//     </div>
// </div>

// <div class="panel" style="display: none;">
//     <div class="panel-heading">
//         <h3 class="panel-title">History</h3>
//     </div>
//     <div class="panel-body">
//         <div class="list-table " style="">
//             <div class="panel " style="">
//                 <div class="panel-body">
//                     <table id="history-data-table" border="0" cellpadding="6" cellspacing="1" class="table table-bordered  " style="">
//                         <thead class="list-thead">
//                             <tr>
//                                 <td class="" style="text-align:center;white-space:nowrap;" width="100" code="item">
//                                     <span>Item</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="change_from">
//                                     <span>Change From</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="change_to">
//                                     <span>Change To</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="done_by">
//                                     <span>Done By</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="date">
//                                     <span>Date</span>
//                                 </td>
//                             </tr>
//                         </thead>
//                         <tbody class="list-tbody"></tbody>
//                     </table>
// <script type="text/javascript">
// $(document).ready(function() {
//     var minwidth = 0;
//     var isFixedColumns = minwidth > 0 && $('#history-data-table').width() < minwidth;
//     // console.log($('#history-data-table').width(), isFixedColumns);
//     var table = $('#history-data-table').DataTable({
//         fixedHeader:    true,
//         autoWidth: 		isFixedColumns,
//         scrollCollapse: true,
//         paging:         false,
//         info: 			false,
//         searching: 		false,
//         scrollX:        true,
//         order: 			[[0, '']],
//         columnDefs: 	[
//         {targets:'nosort', orderable:false, sSortAsc:false}
//         ]
//     }).on( 'order.dt', function () {
//         var order = table.order()[0];
//         var code  = $('thead td', this).eq(order[0]).attr('code');
//         // console.log(code);
//     });

//     if (isFixedColumns) {
//         new $.fn.dataTable.FixedColumns(table, {
//             leftColumns: 1,
//             rightColumns: 1
//         });
//     }
// });
// </script>
//                 </div>
//             </div>
//         </div>
//     </div>
// </div>

// <div class="panel" style="display: none;">
//     <div class="panel-heading">
//         <h3 class="panel-title">Notes</h3>
//         <div class="panel-actions">
//             <div class="dropdown">
//                 <a class="panel-action" data-toggle="modal" data-target="#exampleFormModal" href="#" aria-expanded="false" title="Add">
//                     <i class="icon wb-plus-circle" aria-hidden="true"></i>
//                 </a>
//             </div>
//         </div>
//     </div>
//     <div class="panel-body">
//         <div class="list-table " style="">
//             <div class="panel " style="">
//                 <div class="panel-body">
//                     <table id="tabel201709201431374343580" border="0" cellpadding="6" cellspacing="1" class="table table-bordered  " style="">
//                         <thead class="list-thead">
//                             <tr>
//                                 <td class="" style="text-align:center;white-space:nowrap;" width="100" code="note">
//                                     <span>Note</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="added_by">
//                                     <span>Add By</span>
//                                 </td>
//                                 <td class="" style="text-align:center;white-space:nowrap;" code="date">
//                                     <span>Date</span>
//                                 </td>
//                                 <td class="nosort" style="text-align:center;white-space:nowrap;" width="100" code="">
//                                     <span>Action</span>
//                                 </td>
//                             </tr>
//                         </thead>
//                         <tbody class="list-tbody"></tbody>
//                     </table>
// <script type="text/javascript">
// $(document).ready(function() {
//     var minwidth = 0;
//     var isFixedColumns = minwidth > 0 && $('#tabel201709201431374343580').width() < minwidth;
//     // console.log($('#tabel201709201431374343580').width(), isFixedColumns);
//     var table = $('#tabel201709201431374343580').DataTable({
//         fixedHeader:    true,
//         autoWidth: 		isFixedColumns,
//         scrollCollapse: true,
//         paging:         false,
//         info: 			false,
//         searching: 		false,
//         scrollX:        true,
//         order: 			[[0, '']],
//         columnDefs: 	[
//         {targets:'nosort', orderable:false, sSortAsc:false}
//         ]
//     }).on( 'order.dt', function () {
//         var order = table.order()[0];
//         var code  = $('thead td', this).eq(order[0]).attr('code');
//         // console.log(code);
//     });

//     if (isFixedColumns) {
//         new $.fn.dataTable.FixedColumns(table, {
//             leftColumns: 1,
//             rightColumns: 1
//         });
//     }
// });
// </script>
//                 </div>
//             </div>
//         </div>
//     </div>
// </div>
//     </div>
// <link rel="stylesheet" type="text/css" href="/_resource/css/jquery-ui.css">
// <script type="text/javascript" src="/_resource/js/jquery-ui.js"></script>
// <script type="text/javascript">
// $(function(){
//     $.showError('test location...', 400, function(){}, 1000);
//     var uid = Api.Params()['id'], companyList = false, jobTitleList = false, schoolList = false;
//     Date.prototype.pattern=function(fmt) {           
//         var o = {           
//             "M+" : this.getMonth()+1, //月份           
//             "d+" : this.getDate(), //日           
//             "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时           
//             "H+" : this.getHours(), //小时           
//             "m+" : this.getMinutes(), //分           
//             "s+" : this.getSeconds(), //秒           
//             "q+" : Math.floor((this.getMonth()+3)/3), //季度           
//             "S" : this.getMilliseconds() //毫秒           
//         };           
//         var week = {           
//             "0" : "/u65e5",           
//             "1" : "/u4e00",           
//             "2" : "/u4e8c",           
//             "3" : "/u4e09",           
//             "4" : "/u56db",           
//             "5" : "/u4e94",           
//             "6" : "/u516d"          
//         };           
//         if(/(y+)/.test(fmt)){           
//             fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));           
//         }           
//         if(/(E+)/.test(fmt)){           
//             fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);           
//         }           
//         for(var k in o){           
//             if(new RegExp("("+ k +")").test(fmt)){           
//                 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));           
//             }           
//         }           
//         return fmt;           
//     }       
//     Api.Get('getUserInfo', {id:uid}, function(object, error){
//         // console.log('User Detail Info:');
//         // console.log(object);
//         if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
//             var user = object['data'];

//             // 展示顶部的用户信息
//             var userType = 0;
//             if(user['roles'].length > 0){
//                 var isSeeker = false, isRecruiter = false;
//                 for(var i=0; i<user['roles'].length; ++i){
//                     if(user['roles'][i]['name'] == 'job_seeker'){
//                         isSeeker = true;
//                     }
//                     if(user['roles'][i]['name'] == 'recruiter'){
//                         isRecruiter = true;
//                     }
//                 }
//                 if(isSeeker && isRecruiter){
//                     userType = 'job_seeker-recruiter';
//                 }
//                 if(isSeeker && !isRecruiter){
//                     userType = 'job_seeker';
//                 }
//                 if(!isSeeker && isRecruiter){
//                     userType = 'recruiter';
//                 }
//             }
//             displayUserTopInfo({
//                 avatar : user['avatar'].length > 0 ? user['avatar'] : false, 
//                 email : user['email'], 
//                 mobile : user['phone_num'], 
//                 userType : userType,
//                 firstName : user['first_name'],
//                 status : user['status_key'],
//                 lastName : user['last_name'],
//                 gender : user['gender'],
//                 birth : user['birthdate'],
//                 age : user['age'],
//                 password : user['uuid'],
//             });
//             displayUserBasicInfo({
//                 seeker : (userType == 'job_seeker' || userType == 'job_seeker-recruiter') ? {
//                     experience : user['xp_lvl_key'],
//                     employ : user['employment_status_key'],
//                 } : false,
//                 recruiter : (userType == 'recruiter' || userType == 'job_seeker-recruiter') ? {
//                     experience : user['xp_lvl_key'],
//                     employ : user['employment_status_key'],
//                 } : false,
//             });
//             displayWorkExperience(user['work_xps']);
//             displayEducationExperience(user['educations']);
//             displayResume(user['resumes']);
//             displayJobPreference(user['preferences']);
//             displayTasks();
//             displayRestrictions();
//             displayHistory();
//             displayNotes();
//             bindCreationPanelSubmitEvent();
//         }
//         Api.Get('getCompanyListForAutoComplete', {}, function(object, error){
//             console.log('Company Auto Complete List: ');
//             console.log(object);
//             if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
//                 companyList = [];
//                 for(var i=0; i<object['data'].length; ++i){
//                     companyList.push({
//                         label : object['data'][i]['name'],
//                         value : object['data'][i]['name'],
//                         cid : object['data'][i]['id'],
//                     });
//                 }
//             }
//             Api.Get('getJobTitleListForAutoComplete', {}, function(object, error){
//                 console.log('Job Title Auto Complete List: ');
//                 console.log(object);
//                 if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
//                     jobTitleList = [];
//                     for(var i=0; i<object['data'].length; ++i){
//                         jobTitleList.push({
//                             label : object['data'][i]['name'],
//                             value : object['data'][i]['name'],
//                             jtid : object['data'][i]['id'],
//                         });
//                     }
//                 }
//                 Api.Get('getSchoolList', {}, function(object, error){
//                     console.log('School Auto Complete List: ');
//                     console.log(object);
//                     if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
//                         schoolList = [];
//                         for(var i=0; i<object['data'].length; ++i){
//                             schoolList.push({
//                                 label : object['data'][i]['name'],
//                                 value : object['data'][i]['name'],
//                                 sid : object['data'][i]['id'],
//                             });
//                         }
//                     }
//                 });
//             });
//         });
//     });

//     function displayUserBasicInfo(info){
//         var seekerInfo = info['seeker'], recruiterInfo = info['recruiter'];
//         if(seekerInfo){
//             $('.nav-item[data-usertype="seeker"]').css('display', 'inline-block');
//             // $('#seeker-basic-info-panel').hasClass('basic-info-panel-active').css('display', 'block');、
//             $('#user-basic-info-seeker-experience option[value="'+seekerInfo['experience']+'"]').attr('selected', 'selected');
//             $('#user-basic-info-seeker-employstatus option[value="'+seekerInfo['employ']+'"]').attr('selected', 'selected');
//         }
//         if(recruiterInfo){
//             $('.nav-item[data-usertype="recruiter"]').css('display', 'inline-block');
//             // $('#recruiter-basic-info-panel').css('display', 'block');
//             $('#user-basic-info-recruiter-experience option[value="'+recruiterInfo['experience']+'"]').attr('selected', 'selected');
//             $('#user-basic-info-recruiter-employstatus option[value="'+recruiterInfo['employ']+'"]').attr('selected', 'selected');
//         }

//         // edit user basic info
//         $('#edit-user-basic-info').click(function(){
//             var panelId = $('.basic-info-panel-active').attr('id');
//             // update user seeler basic info
//             if(panelId == 'seeker-basic-info-panel'){
//                 $('#user-basic-info-seeker-experience, #user-basic-info-seeker-employstatus').removeAttr('disabled');
//                 $('#edit-user-seeker-basic-submit').parent().css('display', 'block');
//             }
//             // update user recruiter basic info
//             if(panelId == 'recruiter-basic-info-panel'){
//                 $('#user-basic-info-recruiter-experience, #user-basic-info-recruiter-employstatus').removeAttr('disabled');
//                 $('#edit-user-recruiter-basic-submit').parent().css('display', 'block');
//             }
//             $('#edit-user-basic-info-cancel').css('display', 'inline-block');
//         });

//         // edit user basic info cancel
//         $('#edit-user-basic-info-cancel').click(function(){
//             var panelId = $('.basic-info-panel-active').attr('id');
//             // update user seeler basic info
//             if(panelId == 'seeker-basic-info-panel'){
//                 $('#user-basic-info-seeker-experience, #user-basic-info-seeker-employstatus').attr('disabled', 'disabled');
//                 $('#edit-user-seeker-basic-submit').parent().css('display', 'none');
//             }
//             // update user recruiter basic info
//             if(panelId == 'recruiter-basic-info-panel'){
//                 $('#user-basic-info-recruiter-experience, #user-basic-info-recruiter-employstatus').attr('disabled', 'disabled');
//                 $('#edit-user-recruiter-basic-submit').parent().css('display', 'none');
//             }
//             $('#edit-user-basic-info-cancel').css('display', 'none');
//         });

//         $('#edit-user-seeker-basic-submit').click(function(){
//             var seekerExperience = $('#user-basic-info-seeker-experience').val();
//             var seekerEmployStatus = $('#user-basic-info-seeker-employstatus').val();
//             var userData = {
//                 uid : uid,
//                 employment_status_key : seekerEmployStatus,
//                 xp_lvl_key :seekerExperience,
//             };
//             Api.Put('updateUserTopInfo', userData, function(object, error){
//                 if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
//                     $.showSuccess('Update user basic info successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                     $.showError('Something error, retry later.', 300);
//                 }
//             }, {uid : true});
//         });
//         $('#edit-user-recruiter-basic-submit').click(function(){
//             var recruiterExperience = $('#user-basic-info-recruiter-experience').val();
//             var recruiterEmployStatus = $('#user-basic-info-recruiter-employstatus').val();
//             var userData = {
//                 uid : uid,
//                 employment_status_key : recruiterEmployStatus,
//                 xp_lvl_key : recruiterExperience,
//             };
//             Api.Put('updateUserTopInfo', userData, function(object, error){
//                 if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
//                     $.showSuccess('Update user basic info successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                     $.showError('Something error, retry later.', 300);
//                 }
//             }, {uid : true});
//         });
//     }

//     function displayWorkExperience(works){
        
//         var workExperienceHtml = '';
//         for(var i=works.length-1; i>=0; --i){
//             workExperienceHtml = workExperienceHtml + Api.render(`
//             <div class="panel-heading user-work-experience-item" data-workid="{workId}">
//                 <h3 class="panel-title"></h3>
//                 <div class="panel-actions">
//                     <div class="dropdown">
//                         <a class="panel-action user-work-experience-edit" data-toggle="dropdown" href="#" data-workid="{workId}" aria-expanded="false" title="Edit">
//                             <i class="icon wb-pencil" aria-hidden="true"></i>
//                         </a>
//                         <a class="panel-action user-work-experience-delete" data-toggle="modal" data-target="#exampleNiftyFadeScale" href="#" data-workid="{workId}" aria-expanded="false" title="Delete">
//                             <i class="icon wb-trash" aria-hidden="true"></i>
//                         </a>
//                         <a class="panel-action user-work-experience-edit-cancel" data-toggle="dropdown" href="#" data-workid="{workId}" aria-expanded="false" title="Cancel">
//                             <i class="icon wb-close" aria-hidden="true" style="display:none;"></i>
//                         </a>
//                     </div>
//                 </div>
//             </div>
//             <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap user-work-experience-item" data-workid="{workId}">
//                 <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
//                 <div class="row row-lg">
//                     <div class="col-lg-6 form-horizontal">
//                         <div class="form-group">
//                             <label class="col-sm-3 control-label">Job Title</label>
//                             <div class="col-sm-9">
//                                 <input type="text" class="form-control user-work-job-title" name="job_title" data-workid="{workId}" value="{jobTitle}" disabled="disabled">
//                                 <input type="hidden" name="job_title_id" class="user-work-job-title-id" data-workid="{workId}" value="{jobTitleId}" disabled="disabled">
//                             </div>
//                         </div>
//                         <div class="form-group">
//                             <label class="col-sm-3 control-label">Company Name</label>
//                             <div class="col-sm-9">
//                                 <input type="text" class="form-control user-work-company-name" name="company_name" data-workid="{workId}" value="{companyName}" disabled="disabled">
//                                 <input type="hidden" name="company_id" class="user-work-company-id" value="{companyId}" data-workid="{workId}" disabled="disabled">
//                             </div>
//                         </div>
//                         <div class="form-group">
//                             <label class="col-sm-3 control-label">Description</label>
//                             <div class="col-sm-9">
//                                 <textarea class="form-control user-work-job-description" name="description" data-workid="{workId}" rows="5" disabled="disabled" maxlength="700">{jobDescription}</textarea>
//                             </div>
//                         </div>
//                         <div class="form-group">
//                             <label class="col-sm-3 control-label"></label>
//                             <div class="col-sm-9">
//                                 <div class="checkbox-custom checkbox-primary">
//                                     <input type="checkbox" name="block" class="user-work-company-block" data-workid="{workId}" value="block" {blockChecked} disabled="disabled">
//                                     <label for="block">Block all recruiters from this company</label>
//                                 </div>
//                             </div>
//                             <label class="col-sm-3 control-label"></label>
//                             <div class="col-sm-9">
//                                 <div class="checkbox-custom checkbox-primary">
//                                     <input type="checkbox" name="here" class="user-work-company-currently-here" data-workid="{workId}" value="block" {hereChecked} disabled="disabled">
//                                     <label for="block">Currently work here</label>
//                                 </div>
//                             </div>
//                         </div>
//                     </div>

//                     <div class="col-lg-6 form-horizontal">
//                         <div class="form-group">
//                             <label class="col-sm-3 control-label">From</label>
//                             <div class="col-sm-9">
//                                 <div class="input-daterange" data-plugin="datepicker">
//                                     <div class="input-group col-sm-6">
//                                         <span class="input-group-addon">
//                                             <i class="icon wb-calendar" aria-hidden="true"></i>
//                                         </span>
//                                         <input type="text" class="form-control user-work-period-start" name="start" data-workid="{workId}" value="{periodFrom}" disabled="disabled">
//                                     </div>
//                                     <div class="input-group col-sm-6">
//                                         <span class="input-group-addon">to</span>
//                                         <input type="text" class="form-control user-work-period-end" name="end" data-workid="{workId}" value="{periodTo}" disabled="disabled">
//                                     </div>
//                                 </div>
//                             </div>
//                         </div>
//                         <div class="form-group">
//                             <label class="col-sm-3 control-label">Location</label>
//                             <div class="col-sm-9">
//                                 <input type="text" class="form-control user-work-company-location" name="company_location" data-workid="{workId}" value="{companyLocation}" disabled="disabled">
//                             </div>
//                         </div>
//                     </div>

//                     <div class="form-group col-lg-12 text-right padding-top-m">
//                         <button type="button" class="btn btn-primary  user-work-experience-edit-submit" data-workid="{workId}" style="display:none;">Submit</button>
//                     </div>
//                 </div>
//             </form>
//             `,
//             {
//                 workId : works[i]['id'],
//                 jobTitle : works[i]['job_title'],
//                 jobTitleId : works[i]['job_title_id'], 
//                 jobDescription : works[i]['description'] ? works[i]['description'] : '',
//                 blockChecked : works[i]['is_company_blacklisted'] ? 'checked="checked"' : '',
//                 hereChecked : works[i]['is_currently_work_here'] ? 'checked="checked"' : '',
//                 periodFrom : works[i]['working_period_from'],
//                 periodTo : works[i]['working_period_to'] && works[i]['working_period_to'] != '0000-00-00' ? works[i]['working_period_to'] : 'now', 
//                 companyName : works[i]['company'],
//                 companyId : works[i]['company_id'],
//                 companyLocation : 'Unknown',
//             });
//         }
//         $('#user-work-experience-panel').html(workExperienceHtml);
//         var startDate = false, endDate = false;
//         $('.user-work-period-end').datepicker({format: 'yyyy-mm-dd'}).on('changeDate', function(e){
//             var workId = $(this).data('workid');
//             var date = e.date.pattern('yyyy-MM-dd');
//             endDate = date;
//         });
//         $('.user-work-period-start').datepicker({format: 'yyyy-mm-dd'}).on('changeDate', function(e){
//             var workId = $(this).data('workid');
//             var date = e.date.pattern('yyyy-MM-dd');
//             startDate = date;
//         });
//         var companyNameAutoComplete = setInterval(function(){
//             // console.log('Waiting for data to finish [Company Name Auto Complete] ...');
//             if(companyList){
//                 $('.user-work-company-name').autocomplete({
//                     source: companyList,
//                     select: function( event, ui ) {
//                         $('.user-work-company-id[data-workid="'+$(this).data('workid')+'"]').val(ui.item.cid);
//                     }
//                 });
//                 $('#awe-company-name').autocomplete({
//                     source: companyList,
//                     select: function( event, ui ) {
//                         $('#awe-company-id').val(ui.item.cid);
//                     }
//                 });
//                 clearInterval(companyNameAutoComplete);
//             }
//         }, 400);
//         var jobTitleAutoComplete = setInterval(function(){
//             // console.log('Waiting for data to finish [Job Title Auto Complete] ...');
//             if(jobTitleList){
//                 $('.user-work-job-title').autocomplete({
//                     source: jobTitleList,
//                     select: function( event, ui ) {
//                         $('.user-work-job-title-id[data-workid="'+$(this).data('workid')+'"]').val(ui.item.jtid);
//                     }
//                 });
//                 $('#awe-job-title').autocomplete({
//                     source: jobTitleList,
//                     select: function( event, ui ) {
//                         $('#awe-job-title-id').val(ui.item.jtid);
//                     }
//                 });
//                 clearInterval(jobTitleAutoComplete);
//             }
//         }, 400);
//         $('.user-work-experience-delete').click(function(){
//             var workId = $(this).data('workid');
//             var deleteConfirm = window.confirm('Are you sure to elete this work experience?');
//             if(deleteConfirm){
//                 Api.Delete('deleteUserWorkExperience', {uid:uid,workId:workId}, function(object, error){
//                     if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
//                         $('.user-work-experience-item[data-workid="'+workId+'"]').remove();
//                         $.showSuccess('Delete user work experience successfully.', 400);
//                     }else{
//                         $.showError('Something error, retry later.', 300);
//                     }
//                 });
//             }
//             return false;
//         });
//         $('.user-work-experience-edit').click(function(){
//             var workId = $(this).data('workid');
//             $('.user-work-experience-edit-cancel[data-workid="'+workId+'"]>i').css('display', 'inline-block');
//             $('.user-work-experience-edit-submit[data-workid="'+workId+'"]').css('display', 'inline-block');
//             $('.user-work-company-id[data-workid="'+workId+'"], .user-work-company-name[data-workid="'+workId+'"], .user-work-period-end[data-workid="'+workId+'"], .user-work-period-start[data-workid="'+workId+'"], .user-work-company-block[data-workid="'+workId+'"], .user-work-job-title[data-workid="'+workId+'"], .user-work-job-title-id[data-workid="'+workId+'"], .user-work-job-description[data-workid="'+workId+'"], .user-work-company-currently-here[data-workid="'+workId+'"], .user-work-company-location[data-workid="'+workId+'"]').removeAttr('disabled');
//             startDate = $('.user-work-period-start[data-workid="'+workId+'"]').val();
//             endDate = $('.user-work-period-end[data-workid="'+workId+'"]').val();
//             return false;
//         });
//         $('.user-work-experience-edit-cancel').click(function(){
//             var workId = $(this).data('workid');
//             $('.user-work-experience-edit-cancel[data-workid="'+workId+'"]>i').css('display', 'none');
//             $('.user-work-experience-edit-submit[data-workid="'+workId+'"]').css('display', 'none');
//             $('.user-work-company-id[data-workid="'+workId+'"], .user-work-company-name[data-workid="'+workId+'"], .user-work-period-end[data-workid="'+workId+'"], .user-work-period-start[data-workid="'+workId+'"], .user-work-company-block[data-workid="'+workId+'"], .user-work-job-title[data-workid="'+workId+'"], .user-work-job-title-id[data-workid="'+workId+'"], .user-work-job-description[data-workid="'+workId+'"], .user-work-company-currently-here[data-workid="'+workId+'"], .user-work-company-location[data-workid="'+workId+'"]').attr('disabled', 'disabled');
//             startDate = false;
//             endDate = false;
//             return false;
//         });
//         $('.user-work-experience-edit-submit').click(function(){
//             var workId = $(this).data('workid');
//             if($('.user-work-company-currently-here[data-workid="'+workId+'"]').is(':checked')){
//                 endDate = 'now';
//             }
//             if(!startDate){
//                 $.showError('Work experience start date can not be empty.', 300);
//                 return false;
//             }
//             if(!endDate){
//                 $.showError('Work experience end date can not be empty.', 300);
//                 return false;
//             }
//             if(endDate < startDate){
//                 $.showError('Work experience end date can not less than start date.', 400);
//                 return false;
//             }
//             var work = {
//                 uid : uid,
//                 workId : workId,
//                 id : workId,
//                 company_id : $('.user-work-company-id[data-workid="'+workId+'"]').val(),
//                 company : $('.user-work-company-name[data-workid="'+workId+'"]').val(),
//                 job_title_id : $('.user-work-job-title-id[data-workid="'+workId+'"]').val(),
//                 job_title : $('.user-work-job-title[data-workid="'+workId+'"]').val(),
//                 working_period_from : startDate,
//                 working_period_to : endDate,
//                 is_currently_work_here : $('.user-work-company-currently-here[data-workid="'+workId+'"]').is(':checked') ? 1 : 0,
//                 is_company_blacklisted : $('.user-work-company-block[data-workid="'+workId+'"]').is(':checked') ? 1 : 0,
//                 description : $('.user-work-job-description[data-workid="'+workId+'"]').val(),
//                 // location : $('.user-work-company-location[data-workid="'+workId+'"]').val(),
//             };
//             if(work['is_currently_work_here']){
//                 work['working_period_to'] = 'now';
//             }
//             Api.Put('updateUserWorkExperience', work, function(object, error){
//                 // console.log(object);
//                 if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
//                     $.showSuccess('Update user\'s work experience successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                   $.showError('Something error, retry later.', 300);
//                 }
//             }, {workId:true,uid:true});
//             startDate = false;
//             endDate = false;
//             return false;
//         });
//     }

//     function displayEducationExperience(educations){
//         var userEducationHtml = '';
//         for(var i=educations.length-1; i>=0; --i){
//             userEducationHtml = userEducationHtml + Api.render(`
//                 <div class="panel-heading user-education-item" data-educationid="{educationId}">
//                     <h3 class="panel-title"></h3>
//                     <div class="panel-actions">
//                         <div class="dropdown">
//                             <a class="panel-action user-edu-exp-edit" data-toggle="dropdown" href="#" data-educationid="{educationId}" aria-expanded="false" title="Edit">
//                                 <i class="icon wb-pencil" aria-hidden="true"></i>
//                             </a>
//                             <a class="panel-action user-education-delete" data-toggle="modal" data-target="#exampleNiftyFadeScale" href="#" data-educationid="{educationId}" aria-expanded="false" title="Delete">
//                                 <i class="icon wb-trash" aria-hidden="true"></i>
//                             </a>
//                             <a class="panel-action user-edu-exp-edit-cancel" data-toggle="dropdown" href="#" data-educationid="{educationId}" aria-expanded="false" title="Cancel" style="display:none;">
//                                 <i class="icon wb-close" aria-hidden="true"></i>
//                             </a>
//                         </div>
//                     </div>
//                 </div>
//                 <div class="panel-body user-education-item" data-educationid="{educationId}">
//                     <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap">
//                         <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
//                         <div class="row row-lg">
//                             <div class="col-lg-6 form-horizontal">
//                                 <div class="form-group">
//                                     <label class="col-sm-3 control-label">School</label>
//                                     <div class="col-sm-9">
//                                         <input type="text" class="form-control user-edu-exp-school-name" data-educationid="{educationId}" name="school" value="{eduSchool}" disabled="disabled">
//                                         <input type="text" name="school_id" class="user-edu-exp-school-id" data-educationid="{educationId}" value="{eduSchoolId}" style="display:none;" disabled="disabled">
//                                     </div>
//                                 </div>
//                                 <div class="form-group">
//                                     <label class="col-sm-3 control-label">Degree</label>
//                                     <div class="col-sm-9">
//                                         <select class="form-control form-control-sm user-edu-exp-degree" name="degree_key" disabled="disabled" data-educationid="{educationId}">
//                                             <option value="diploma" {dipSelected}>Diploma</option>
//                                             <option value="bachelor" {bacSelected}>Bachelor</option>
//                                             <option value="master" {masSelected}>Master</option>
//                                             <option value="doctor" {docSelected}>Doctor</option>
//                                         </select>
//                                     </div>
//                                 </div>
//                                 <div class="form-group">
//                                     <label class="col-sm-3 control-label">Field of Study</label>
//                                     <div class="col-sm-9">
//                                         <input type="text" class="form-control user-edu-exp-field" name="field_of_study" value="{fieldStudy}" disabled="disabled" data-educationid="{educationId}">
//                                     </div>
//                                 </div>

//                             </div>

//                             <div class="col-lg-6 form-horizontal">
//                                 <div class="form-group">
//                                     <label class="col-sm-3 control-label">From</label>
//                                     <div class="col-sm-9">
//                                         <div class="input-daterange">
//                                             <div class="input-group col-sm-6">
//                                                   <span class="input-group-addon">
//                                                     <i class="icon wb-calendar" aria-hidden="true"></i>
//                                                   </span>
//                                                 <input type="text" class="form-control user-edu-exp-start" name="start" value="{periodFrom}" disabled="disabled" data-educationid="{educationId}">
//                                             </div>
//                                             <div class="input-group col-sm-6">
//                                                 <span class="input-group-addon">to</span>
//                                                 <input type="text" class="form-control user-edu-exp-end" name="end" value="{periodTo}" disabled="disabled" data-educationid="{educationId}">
//                                             </div>
//                                         </div>
//                                     </div>
//                                 </div>
//                                 <div class="form-group">
//                                     <label class="col-sm-3 control-label">Grade</label>
//                                     <div class="col-sm-9">
//                                         <input type="text" class="form-control user-edu-exp-grade" name="grade" value="{grade}" disabled="disabled" data-educationid="{educationId}">
//                                     </div>
//                                 </div>
//                                 <div class="form-group">
//                                     <label class="col-sm-3 control-label">Description</label>
//                                     <div class="col-sm-9">
//                                         <textarea class="maxlength-textarea form-control user-edu-exp-description" data-educationid="{educationId}" data-plugin="maxlength" name="description" rows="5" maxlength="300" disabled="disabled">{description}</textarea>
//                                     </div>
//                                 </div>
//                             </div>

//                             <div class="form-group col-lg-12 text-right padding-top-m" style="display: none">
//                                 <button type="button" class="btn btn-primary  user-edu-exp-submit" id="validateButton1" data-educationid="{educationId}">Submit</button>
//                             </div>
//                         </div>
//                     </form>
//                 </div>
//             `,
//             {
//                 educationId : educations[i]['id'],
//                 eduSchool : educations[i]['school'],
//                 eduSchoolId : educations[i]['school_id'],
//                 dipSelected : educations[i]['degree_key'] == 'diploma' ? 'selected="selected"' : '',
//                 bacSelected : educations[i]['degree_key'] == 'bachelor' ? 'selected="selected"' : '',
//                 masSelected : educations[i]['degree_key'] == 'master' ? 'selected="selected"' : '',
//                 docSelected : educations[i]['degree_key'] == 'doctor' ? 'selected="selected"' : '',
//                 fieldStudy : educations[i]['field_of_study'],
//                 periodFrom : educations[i]['study_period_from'],
//                 periodTo : educations[i]['study_period_to'] ? educations[i]['study_period_to'] : '至今', 
//                 grade : educations[i]['grade'],
//                 description : educations[i]['description'] ? educations[i]['description'] : '',
//             });
//         }
//         $('#user-education-experience-panel').html(userEducationHtml);
//         $('#add-edu-start').datepicker({format: 'yyyy-mm-dd'});
//         $('.user-edu-exp-start').datepicker({format: 'yyyy-mm-dd'});
//         $('#add-edu-end').datepicker({format: 'yyyy-mm-dd'});
//         $('.user-edu-exp-end').datepicker({format: 'yyyy-mm-dd'});
        
//         var schoolListAutoComplete = setInterval(function(){
//             // console.log('Waiting for data to finish [School Name Auto Complete] ...');
//             if(schoolList){
//                 $('.user-edu-exp-school-name').autocomplete({
//                     source: schoolList,
//                     select: function( event, ui ) {
//                         $('.user-edu-exp-school-id[data-educationid="'+$(this).data('educationid')+'"]').val(ui.item.sid);
//                     }
//                 });
//                 $('#add-edu-school-name').autocomplete({
//                     source: schoolList,
//                     select: function( event, ui ) {
//                         $('#add-edu-school-id').val(ui.item.sid);
//                     }
//                 });
//                 clearInterval(schoolListAutoComplete);
//             }
//         }, 400);
//         $('.user-education-delete').click(function(){
//             var educationId = $(this).data('educationid');
//             var deleteConfirm = window.confirm('Are you sure to elete this education experience?');
//             if(deleteConfirm){
//                 Api.Delete('deleteUserEducationExperience', {uid:uid,eduId:educationId}, function(object, error){
//                     if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
//                         $('.user-education-item[data-educationid="'+educationId+'"]').remove();
//                         $.showSuccess('Delete user education experience successfully.', 400);
//                     }else{
//                         $.showError('Something error, retry later.', 300);
//                     }
//                 });
//             }
//             return false;
//         });
//         $('.user-edu-exp-edit').click(function(){
//             var eduId = $(this).data('educationid');
//             $('.user-edu-exp-edit-cancel[data-educationid="'+eduId+'"]').css('display', 'inline-block');
//             $('.user-edu-exp-school-name[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-degree[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-field[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-start[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-end[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-grade[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-description[data-educationid="'+eduId+'"]').removeAttr('disabled');
//             $('.user-edu-exp-submit[data-educationid="'+eduId+'"]').parent().css('display', 'inline-block');
//             return false;
//         });
//         $('.user-edu-exp-edit-cancel').click(function(){
//             var eduId = $(this).data('educationid');
//             $('.user-edu-exp-edit-cancel[data-educationid="'+eduId+'"]').css('display', 'none');
//             $('.user-edu-exp-school-name[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-degree[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-field[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-start[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-end[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-grade[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-description[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
//             $('.user-edu-exp-submit[data-educationid="'+eduId+'"]').parent().css('display', 'none');
//             return false;
//         });
//         $('.user-edu-exp-school-name').keyup(function(e){
//             var eduId = $(this).data('educationid');
//             if(e.which != 13){
//                 $('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').val(0);
//             }
//         });
//         $('.user-edu-exp-submit').click(function(){
//             var eduId = $(this).data('educationid');
//             var schoolName = $('.user-edu-exp-school-name[data-educationid="'+eduId+'"]').val(),
//                 schoolId = parseInt($('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').val()),
//                 degree = $('.user-edu-exp-degree[data-educationid="'+eduId+'"]').val(),
//                 field = $('.user-edu-exp-field[data-educationid="'+eduId+'"]').val(),
//                 from = $('.user-edu-exp-start[data-educationid="'+eduId+'"]').val(),
//                 to = $('.user-edu-exp-end[data-educationid="'+eduId+'"]').val(),
//                 grade = $('.user-edu-exp-grade[data-educationid="'+eduId+'"]').val().trim(),
//                 description = $('.user-edu-exp-description[data-educationid="'+eduId+'"]').val();
//             if(schoolName.length == 0 || isNaN(schoolId) || schoolId == 0){
//                 $.showError('School info can not be empty.', 400);
//                 return false;
//             }
//             if(degree != 'diploma' && degree != 'bachelor' && degree != 'master' && degree != 'doctor'){
//                 $.showError('Education degree is wrong.', 400);
//                 return false;
//             }
//             if(grade.length == 0){
//                 $.showError('Education grade is wrong.', 400);
//                 return false;
//             }
//             if(from.length == 0 || to.length == 0 || from > to){
//                 $.showError('Education period is wrong.', 400);
//                 return false;
//             }
//             if(field.length == 0){
//                 $.showError('Education field can not be empty.', 400);
//                 return false;
//             }
//             if(description.length == 0){
//                 $.showError('Education description can not be empty.', 400);
//                 return false;
//             }
//             var eduData = {
//                 uid : uid,
//                 eduId : eduId,
//                 school_id : schoolId,
//                 school : schoolName,
//                 degree_key : degree,
//                 field_of_study : field,
//                 grade : grade,
//                 description : description,
//                 study_period_from : from,
//                 study_period_to : to,
//             };
//             // console.log(eduData);
//             Api.Put('updateEduExperience', eduData, function(object, error){
//                 // console.log(object);
//                 if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
//                     $.showSuccess('Update user education experience successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                     $.showError('Something error, retry later.', 300);
//                 }
//             }, {uid : true, eduId : true});
//             return false;
//         });
//     }
//     function displayResume(resumes){
//         if(resumes.length > 0){
//             $('#user-using-resume').val(window._sys['user']['name']+'\' resume: 【'+resumes[0]['url'].split('/').pop()+'】...');
//             $('#file-user-resume-link').attr('href', resumes[0]['url']).show();
//         }
//     }

//     function displayJobPreference(preferences){
//         var jobPerferenceHtml = '';
//         for(var i=preferences.length-1; i>=0; --i){
//             jobPerferenceHtml = jobPerferenceHtml + Api.render(`
//                 <div class="panel user-job-preference-item" data-perference="{preferenceId}">
//                     <div class="panel-heading">
//                         <h3 class="panel-title"></h3>
//                         <div class="panel-actions">
//                             <div class="dropdown">
//                                 <a class="panel-action user-job-preference-edit" data-toggle="dropdown" href="#" data-perference="{preferenceId}" aria-expanded="false" title="Edit">
//                                     <i class="icon wb-pencil" aria-hidden="true"></i>
//                                 </a>
//                                 <a class="panel-action user-job-preference-delete" data-toggle="modal" data-target="#exampleNiftyFadeScale" href="#" data-perference="{preferenceId}" aria-expanded="false" title="Delete">
//                                     <i class="icon wb-trash" aria-hidden="true"></i>
//                                 </a>
//                                 <a class="panel-action user-job-preference-edit-cancel" data-toggle="dropdown" href="#" data-perference="{preferenceId}" aria-expanded="false" title="Cancel" style="display:none;">
//                                     <i class="icon wb-close" aria-hidden="true"></i>
//                                 </a>
//                             </div>
//                         </div>
//                     </div>
//                     <div class="panel-body">
//                         <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
//                             <div class="row row-lg">
//                                 <div class="col-lg-6 form-horizontal">
//                                     <div class="form-group">
//                                         <label class="col-sm-3 control-label">Job Title</label>
//                                         <div class="col-sm-9">
//                                             <input type="text" class="form-control  user-jp-job-title" name="job_title" value="{title}" disabled="disabled" data-perference="{preferenceId}">
//                                             <input type="text" class="form-control user-jp-job-title-id" name="job_title_id" value="{titleId}" disabled="disabled" data-perference="{preferenceId}" style="display: none;">
//                                         </div>
//                                     </div>
//                                     <div class="form-group">
//                                         <label class="col-sm-3 control-label">Salary from</label>
//                                         <div class="col-sm-9">
//                                             <div class="input-daterange">
//                                                 <div class="input-group col-sm-6">
//                                                     <input type="number" class="form-control user-jp-salary-from" name="start" value="{salaryFrom}" disabled="disabled" data-perference="{preferenceId}">
//                                                     <span class="input-group-addon">to</span>
//                                                 </div>
//                                                 <div class="input-group col-sm-6">
//                                                     <input type="number" class="form-control user-jp-salary-to" name="end" value="{salaryTo}" disabled="disabled" data-perference="{preferenceId}">
//                                                 </div>
//                                             </div>
//                                         </div>
//                                     </div>
//                                 </div>
//                                 <div class="col-lg-6 form-horizontal">
//                                     <div class="form-group">
//                                         <label class="col-sm-3 control-label">Job Type</label>
//                                         <div class="col-sm-9">
//                                             <select class="form-control form-control-sm user-jp-job-type" name="job_type_key" disabled="disabled" data-perference="{preferenceId}">
//                                                 <option value="full_time" {ftSelected}>Full-time</option>
//                                                 <option value="part_time" {ptSelected}>Part-time</option>
//                                                 <option value="contract" {ctSelected}>Contract</option>
//                                                 <option value="temp" {teSelected}>Temp</option>
//                                                 <option value="internship" {ipSelected}>Internship</option>
//                                             </select>
//                                         </div>
//                                     </div>
//                                     <div class="form-group">
//                                         <label class="col-sm-3 control-label">Location</label>
//                                         <div class="col-sm-9">
//                                             <select class="form-control form-control-sm user-jp-location" name="location_key" data-value="{location}" data-perference="{preferenceId}" disabled>
//                                                 <option value="caloocan" >Caloocan</option>
//                                                 <option value="las_pi" >Las Piñas</option>
//                                                 <option value="makati"  selected >Makati</option>
//                                                 <option value="malabon" >Malabon</option>
//                                                 <option value="mandaluyong" >Mandaluyong</option>
//                                                 <option value="manila" >Manila</option>
//                                                 <option value="marikina" >Marikina</option>
//                                                 <option value="muntinlupa" >Muntinlupa</option>
//                                                 <option value="navotas" >Navotas</option>
//                                                 <option value="para" >Parañaque</option>
//                                                 <option value="pasay" >Pasay</option>
//                                                 <option value="pasig" >Pasig</option>
//                                                 <option value="quezon_city" >Quezon City</option>
//                                                 <option value="san_juan" >San Juan</option>
//                                                 <option value="taguig" >Taguig</option>
//                                                 <option value="valenzuela" >Valenzuela</option>
//                                             </select>
//                                         </div>
//                                     </div>
//                                 </div>
//                                 <div class="form-group col-lg-12 text-right padding-top-m" style="display:none;">
//                                     <button type="button" class="btn btn-primary user-jp-submit" id="validateButton1" data-perference="{preferenceId}">Submit</button>
//                                 </div>
//                             </div>
//                         </form>
//                     </div>
//                 </div>
//             `, {
//                 preferenceId : preferences[i]['id'],
//                 title : preferences[i]['job_title'],
//                 titleId : preferences[i]['job_title_id'],
//                 ftSelected : preferences[i]['job_type_key'] == 'full_time' ? 'selected="selected"' : '',
//                 ptSelected : preferences[i]['job_type_key'] == 'part_time' ? 'selected="selected"' : '',
//                 ctSelected : preferences[i]['job_type_key'] == 'contract' ? 'selected="selected"' : '',
//                 teSelected : preferences[i]['job_type_key'] == 'temp' ? 'selected="selected"' : '',
//                 ipSelected : preferences[i]['job_type_key'] == 'internship' ? 'selected="selected"' : '',
//                 salaryFrom : preferences[i]['salary_range_from'],
//                 salaryTo : preferences[i]['salary_range_to'],
//                 location : preferences[i]['location_key'],
//             });
//         }
//         $('#user-job-preference-panel').html(jobPerferenceHtml);
//         $('.user-jp-location').each(function(i, obj){
//             var value = $(obj).data('value');
//             $(obj).find('option[value="'+value+'"]').attr('selected', 'selected');
//         });
//         $('.user-jp-job-title').keyup(function(e){
//             var preferenceId = $(this).data('perference');
//             if(e.which != 13){
//                         $('.user-jp-job-title-id[data-perference="'+preferenceId+'"]').val(0);
//             }
//         });
//         var jobTitleAutoComplete = setInterval(function(){
//             // console.log('Waiting for data to finish [Job Title Auto Complete] ...');
//             if(jobTitleList){
//                 $('#ajp-job-title').autocomplete({
//                     source: jobTitleList,
//                     select: function( event, ui ) {
//                         $('#ajp-job-title-id').val(ui.item.jtid);
//                     }
//                 });
//                 $('.user-jp-job-title').autocomplete({
//                     source: jobTitleList,
//                     select: function( event, ui ) {
//                         var preferenceId = $(this).data('perference');
//                         $('.user-jp-job-title-id[data-perference="'+preferenceId+'"]').val(ui.item.jtid);
//                     }
//                 });
//                 clearInterval(jobTitleAutoComplete);
//             }
//         }, 400);
//         $('.user-job-preference-edit').click(function(){
//             var perferenceId = $(this).data('perference');
//             $('.user-job-preference-edit-cancel[data-perference="'+perferenceId+'"]').css('display', 'inline-block');
//             $('.user-jp-job-title[data-perference="'+perferenceId+'"]').removeAttr('disabled');
//             $('.user-jp-job-title-id[data-perference="'+perferenceId+'"]').removeAttr('disabled');
//             $('.user-jp-salary-from[data-perference="'+perferenceId+'"]').removeAttr('disabled');
//             $('.user-jp-salary-to[data-perference="'+perferenceId+'"]').removeAttr('disabled');
//             $('.user-jp-location[data-perference="'+perferenceId+'"]').removeAttr('disabled');
//             $('.user-jp-job-type[data-perference="'+perferenceId+'"]').removeAttr('disabled');
//             $('.user-jp-submit[data-perference="'+perferenceId+'"]').parent().css('display', 'block');
//             return false;
//         });
//         $('.user-job-preference-edit-cancel').click(function(){
//             var perferenceId = $(this).data('perference');
//             $('.user-job-preference-edit-cancel[data-perference="'+perferenceId+'"]').css('display', 'none');
//             $('.user-jp-job-title[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
//             $('.user-jp-job-title-id[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
//             $('.user-jp-salary-from[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
//             $('.user-jp-salary-to[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
//             $('.user-jp-location[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
//             $('.user-jp-job-type[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
//             $('.user-jp-submit[data-perference="'+perferenceId+'"]').parent().css('display', 'none');
//             return false;
//         });
//         $('.user-job-preference-delete').click(function(){
//             var preferenceId = $(this).data('perference');
//             var deleteConfirm = window.confirm('Are you sure to elete this job perference?');
//             if(deleteConfirm){
//                 Api.Delete('deleteUserJobPreference', {uid:uid,preferenceId:preferenceId}, function(object, error){
//                     if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
//                         $('.user-job-preference-item[data-perference="'+preferenceId+'"]').remove();
//                         $.showSuccess('Delete user job perference successfully.', 400);
//                     }else{
//                         $.showError('Something error, retry later.', 300);
//                     }
//                 });
//             }
//             return false;
//         });
//         $('.user-jp-submit').click(function(){
//             var preferenceId = $(this).data('perference');
//             var jobTitle = $('.user-jp-job-title[data-perference="'+preferenceId+'"]').val(),
//                 jobTitleId = parseInt($('.user-jp-job-title-id[data-perference="'+preferenceId+'"]').val()),
//                 from = parseInt($('.user-jp-salary-from[data-perference="'+preferenceId+'"]').val()),
//                 to = parseInt($('.user-jp-salary-to[data-perference="'+preferenceId+'"]').val()),
//                 jobType = $('.user-jp-job-type[data-perference="'+preferenceId+'"]').val(),
//                 currency = '',
//                 location = $('.user-jp-location[data-perference="'+preferenceId+'"]').val();

//             if(jobTitle.length == 0 || isNaN(jobTitleId) || jobTitleId == 0){
//                 $.showError('Job perference title info error.', 400);
//                 return false;
//             }
//             // console.log(from);
//             // console.log(to);
//             if(isNaN(from) || isNaN(to) || 0 == from || 0 == to || from > to){
//                 $.showError('Job perference salary info error.', 400);
//                 return false;
//             }
//             if(jobType != 'full_time' && jobType != 'part_time' && jobType != 'contract' && jobType != 'temp' && jobType != 'internship'){
//                 $.showError('Job perference job type info error.', 400);
//                 return false;
//             }
//             if(location == ''){
//                 $.showError('Job perference location info error.', 400);
//                 return false;
//             }
//             var perferenceData = {
//                 uid : uid,
//                 preferenceId : preferenceId,
//                 job_title_id : jobTitleId,
//                 job_title : jobTitle,
//                 location_key : location,
//                 salary_range_from : from,
//                 salary_range_to : to,
//                 currency : currency,
//                 job_type_key : jobType,
//             };
//             // console.log(perferenceData);
//             Api.Put('updateUserJobPerference', perferenceData, function(object, error){
//                 // console.log(object);
//                 if(!error && object['status_code'] && object['status_code'] == 200){
//                     $.showSuccess('Update user job preference successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                     $.showError('Something error, retry later.', 300);
//                 }
//             }, {uid : true, preferenceId : true});
//             return false;
//         });
//     }

//     function displayTasks(){

//     }

//     function displayRestrictions(){

//     }

//     function displayHistory(){

//     }

//     function displayNotes(){

//     }

//     function bindCreationPanelSubmitEvent(){
//         $('#awe-start').datepicker({format: 'yyyy-mm-dd'});
//         $('#awe-end').datepicker({format: 'yyyy-mm-dd'});
//         $('#awe-job-title').keyup(function(e){
//             if(e.which != 13){
//                 $('#awe-job-title-id').val(0);
//             }
//         });
//         $('#awe-company-name').keyup(function(e){
//             if(e.which != 13){
//                 $('#awe-company-id').val(0);
//             }
//         });
//         $('#awe-submit').click(function(){
//             var jobTitle = $('#awe-job-title').val(),
//                 jobTitleId = parseInt($('#awe-job-title-id').val()),
//                 companyName = $('#awe-company-name').val(),
//                 companyId = parseInt($('#awe-company-id').val()),
//                 periodStart = $('#awe-start').val(),
//                 periodEnd = $('#awe-end').val(),
//                 description = $('#awe-description').val(),
//                 block = $('#awe-block').is(':checked') ? 1 : 0;
//             if(jobTitle.length == 0 || isNaN(jobTitleId) || jobTitleId == 0){
//                 $.showError('Work experience job title can not be empty.', 400);
//                 return false;
//             }
//             if(companyName.length == 0 || isNaN(companyId) || companyId == 0){
//                 $.showError('Work experience company can not be empty.', 400);
//                 return false;
//             }
//             if(periodStart.length == 0 || periodEnd.length == 0){
//                 $.showError('Work experience period error.', 400);
//                 return false;
//             }
//             if(periodEnd < periodStart){
//                 $.showError('Work experience end date can not less than start date.', 400);
//                 return false;
//             }
//             if(description.length == 0){
//                 $.showError('Work experience description can not be empty', 400);
//                 return false;
//             }
//             var workData = {
//                 uid : uid,
//                 company_id : companyId,
//                 company : companyName,
//                 job_title_id : jobTitleId,
//                 job_title : jobTitle,
//                 working_period_from : periodStart,
//                 working_period_to : periodEnd,
//                 is_currently_work_here : 0,
//                 description : description,
//                 is_company_blacklisted : block,
//             };
//             // console.log(workData);
//             Api.Post('createUserWorkExperience', workData, function(object, error){
//                 if(!error && object['status_code'] && object['status_code'] == 201){
//                     $.showSuccess('Create user work experience successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                     $.showError('Something error, retry later.', 300);
//                 }
//             }, 'x-www-form-urlencoded', {uid:true});
//             return false;
//         });

//         $('#add-edu-school-name').keyup(function(e){
//             if(e.which != 13){
//                 $('#add-edu-school-id').val(0);
//             }
//         });
//         $('#add-edu-submit').click(function(){
//             var schoolName = $('#add-edu-school-name').val(),
//                 schoolId = parseInt($('#add-edu-school-id').val()),
//                 degree = $('#add-edu-degree').val(),
//                 grade = $('#add-edu-grade').val().trim(),
//                 from = $('#add-edu-start').val(),
//                 to = $('#add-edu-end').val(),
//                 field = $('#add-edu-field').val(),
//                 description = $('#add-edu-description').val();
//             if(schoolName.length == 0 || isNaN(schoolId) || schoolId == 0){
//                 $.showError('School info can not be empty.', 400);
//                 return false;
//             }
//             if(degree != 'diploma' && degree != 'bachelor' && degree != 'master' && degree != 'doctor'){
//                 $.showError('Education degree is wrong.', 400);
//                 return false;
//             }
//             if(grade.length == 0){
//                 $.showError('Education grade is wrong.', 400);
//                 return false;
//             }
//             if(from.length == 0 || to.length == 0 || from > to){
//                 $.showError('Education period is wrong.', 400);
//                 return false;
//             }
//             if(field.length == 0){
//                 $.showError('Education field can not be empty.', 400);
//                 return false;
//             }
//             if(description.length == 0){
//                 $.showError('Education description can not be empty.', 400);
//                 return false;
//             }
//             var eduData = {
//                 uid : uid,
//                 school_id : schoolId,
//                 school : schoolName,
//                 degree_key : degree,
//                 field_of_study : field,
//                 grade : grade,
//                 description : description,
//                 study_period_from : from,
//                 study_period_to : to,
//             };
//             // console.log(eduData);
//             Api.Post('addEduExperience', eduData, function(object, error){
//                 if(!error && object['status_code'] && object['status_code'] == 201){
//                     $.showSuccess('Create user education experience successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                     $.showError('Something error, retry later.', 300);
//                 }
//             }, 'x-www-form-urlencoded', {uid : true});
//             return false;
//         });

//         $('#ajp-job-title').keyup(function(e){
//             if(e.which != 13){
//                 $('#ajp-job-title-id').val(0);
//             }
//         });
//         $('#ajp-submit').click(function(){
//             var jobTitle = $('#ajp-job-title').val(),
//                 jobTitleId = parseInt($('#ajp-job-title-id').val()),
//                 from = parseInt($('#ajp-salary-from').val()),
//                 to = parseInt($('#ajp-salary-to').val()),
//                 jobType = $('#ajp-job-type').val(),
//                 currency = '',
//                 location = $('#ajp-location').val();

//             if(jobTitle.length == 0 || isNaN(jobTitleId) || jobTitleId == 0){
//                 $.showError('Job perference title info error.', 400);
//                 return false;
//             }
//             if(isNaN(from) || isNaN(to) || 0 == from || 0 == to || from > to){
//                 $.showError('Job perference salary info error.', 400);
//                 return false;
//             }
//             if(jobType != 'full_time' && jobType != 'part_time' && jobType != 'contract' && jobType != 'temp' && jobType != 'internship'){
//                 $.showError('Job perference job type info error.', 400);
//                 return false;
//             }
//             if(location == ''){
//                 $.showError('Job perference location info error.', 400);
//                 return false;
//             }
//             var perferenceData = {
//                 uid : uid,
//                 job_title_id : jobTitleId,
//                 job_title : jobTitle,
//                 location_key : location,
//                 salary_range_from : from,
//                 salary_range_to : to,
//                 currency : currency,
//                 job_type_key : jobType,
//             };
//             // console.log(perferenceData);
//             Api.Post('createUserJobPerference', perferenceData, function(object, error){
//                 if(!error && object['status_code'] && object['status_code'] == 201){
//                     $.showSuccess('Create user job preference successfully.', 400, function(){
//                         window.location.reload();
//                     });
//                 }else{
//                     $.showError('Something error, retry later.', 300);
//                 }
//             }, 'x-www-form-urlencoded', {uid : true});
//             return false;
//         });
//     }

//     $('.nav-link').click(function(){
//         var basicUserType = $(this).data('usertype');
//         $('.nav-item').removeClass('active');
//         if(basicUserType == 'seeker'){
//             $('.basic-info-panel').removeClass('basic-info-panel-active').eq(0).addClass('basic-info-panel-active');
//             $('.nav-item[data-usertype="seeker"]').addClass('active');
//         }
//         if(basicUserType == 'recruiter'){
//             $('.basic-info-panel').removeClass('basic-info-panel-active').eq(1).addClass('basic-info-panel-active');
//             $('.nav-item[data-usertype="recruiter"]').addClass('active');
//         }
//         $('#edit-user-basic-info-cancel').trigger('click');
//         return false;
//     });
// });
// </script>
// <div class="modal fade" id="educationExperienceModal" aria-labelledby="educationExperienceModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
//     <div class="modal-dialog modal-simple modal-center">
//         <form class="modal-content">
//             <div class="modal-header">
//                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
//                     <span aria-hidden="true">×</span>
//                 </button>
//                 <h4 class="modal-title" id="educationExperienceModalLabel">Add Education Experience</h4>
//             </div>
//             <div class="modal-body">
//                 <div class="row">
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">School</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" id="add-edu-school-name" name="school" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="school">
//                             <input type="text" name="" id="add-edu-school-id" value="0" style="display: none;">
//                             <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small></div>
//                     </div>
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">Degree</label>
//                         <div class="col-sm-9">
//                             <select class="form-control form-control-sm" name="degree_key" id="add-edu-degree">
//                                 <option value="diploma" >Diploma</option>
//                                 <option value="bachelor" >Bachelor</option>
//                                 <option value="master" >Master</option>
//                                 <option value="doctor" >Doctor</option>
//                             </select>
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">Grade</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" name="grade" id="add-edu-grade" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="grade">
//                             <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;">This is required</small>
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">From</label>
//                         <div class="col-sm-9">
//                             <div class="input-daterange">
//                                 <div class="input-group col-sm-6">
//                                       <span class="input-group-addon">
//                                         <i class="icon wb-calendar" aria-hidden="true"></i>
//                                       </span>
//                                     <input type="text" class="form-control" id="add-edu-start" name="start">
//                                 </div>
//                                 <div class="input-group col-sm-6">
//                                     <span class="input-group-addon">to</span>
//                                     <input type="text" class="form-control" id="add-edu-end" name="end">
//                                 </div>
//                             </div>
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">Field of Study</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" id="add-edu-field" name="field_of_study" >
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">Description</label>
//                         <div class="col-sm-9">
//                             <textarea id="add-edu-description" class="maxlength-textarea form-control" data-plugin="maxlength" name="description" rows="5" maxlength="300"></textarea>
//                         </div>
//                     </div>
//                     <div class="col-md-12 float-right">
//                         <button class="btn btn-primary btn-outline" data-dismiss="modal" id="add-edu-submit" type="button">Submit</button>
//                     </div>
//                 </div>
//             </div>
//         </form>
//     </div>
// </div>     
// <div class="modal fade" id="tasksModal" aria-labelledby="tasksModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
//     <div class="modal-dialog modal-simple modal-center">
//         <form class="modal-content">
//             <div class="modal-header">
//                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
//                     <span aria-hidden="true">×</span>
//                 </button>
//                 <h4 class="modal-title" id="tasksModalLabel">Add Tasks</h4>
//             </div>
//             <div class="modal-body">
//                 <div class="row">
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">Daily Chat Limit</label>
//                         <div class="col-sm-9">
//                             <input type="number" class="form-control" name="chat_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="chat_limit">
//                             <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small></div>
//                     </div>
//                     <div class="form-group" style="height: 20px">
//                         <label class="col-sm-3 control-label">Daily Send Resume Limit</label>
//                         <div class="col-sm-9">
//                             <input type="number" class="form-control" name="send_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="send_limit">
//                             <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small></div>
//                     </div>

//                     <div class="col-md-12 float-right">
//                         <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button">Submit</button>
//                     </div>
//                 </div>
//             </div>
//         </form>
//     </div>
// </div>
// <div class="modal fade" id="jobPerferenceModal" aria-labelledby="jobPerferenceModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
//     <div class="modal-dialog modal-simple modal-center">
//         <form class="modal-content">
//             <div class="modal-header">
//                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
//                     <span aria-hidden="true">×</span>
//                 </button>
//                 <h4 class="modal-title" id="jobPerferenceModalLabel">Add Job Preference</h4>
//             </div>
//             <div class="modal-body">
//                 <div class="row">
//                     <div class="form-group" style="height: 20px;">
//                         <label class="col-sm-3 control-label">Job Title</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" name="job_title" id="ajp-job-title">
//                             <input type="text" class="form-control" name="job_title_id" id="ajp-job-title-id" style="display: none;">
//                         </div>
//                      </div>
//                     <div class="form-group" style="height: 20px;">
//                         <label class="col-sm-3 control-label">Salary from</label>
//                         <div class="col-sm-9">
//                             <div class="input-daterange">
//                                 <div class="input-group col-sm-6">
//                                     <input type="number" class="form-control" name="salary_start" min="10000" max="100000" step="1000" id="ajp-salary-from">
//                                     <span class="input-group-addon">to</span>
//                                 </div>
//                                 <div class="input-group col-sm-6">
//                                     <input type="number" class="form-control" name="salary_end" min="10000" step="1000" max="200000" id="ajp-salary-to">
//                                 </div>
//                             </div>
//                         </div>
//                     </div>
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Job Type</label>
//                         <div class="col-sm-9">
//                             <select class="form-control form-control-sm" name="job_type_key" id="ajp-job-type">
//                                 <option value="full_time" >Full-time</option>
//                                 <option value="part_time" >Part-time</option>
//                                 <option value="contract" >Contract</option>
//                                 <option value="temp" >Temp</option>
//                                 <option value="internship" >Internship</option>
//                             </select>
//                         </div>
//                     </div>
//                     <div class="form-group">
//                         <label class="col-sm-3 control-label">Location</label>
//                         <div class="col-sm-9">
//                             <select class="form-control form-control-sm" name="location_key" id="ajp-location">
//                                 <option value="caloocan" >Caloocan</option>
//                                 <option value="las_pi" >Las Piñas</option>
//                                 <option value="makati"  selected >Makati</option>
//                                 <option value="malabon" >Malabon</option>
//                                 <option value="mandaluyong" >Mandaluyong</option>
//                                 <option value="manila" >Manila</option>
//                                 <option value="marikina" >Marikina</option>
//                                 <option value="muntinlupa" >Muntinlupa</option>
//                                 <option value="navotas" >Navotas</option>
//                                 <option value="para" >Parañaque</option>
//                                 <option value="pasay" >Pasay</option>
//                                 <option value="pasig" >Pasig</option>
//                                 <option value="quezon_city" >Quezon City</option>
//                                 <option value="san_juan" >San Juan</option>
//                                 <option value="taguig" >Taguig</option>
//                                 <option value="valenzuela" >Valenzuela</option>
//                             </select>
//                         </div>
//                     </div>
//                     <div class="col-md-12 float-right">
//                         <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button" id="ajp-submit">Submit</button>
//                     </div>
//                 </div>
//             </div>
//         </form>
//     </div>
// </div>
// <div class="modal fade" id="exampleFormModal" aria-labelledby="exampleFormModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
//     <div class="modal-dialog modal-simple modal-center">
//         <form class="modal-content">
//             <div class="modal-header">
//                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
//                     <span aria-hidden="true">×</span>
//                 </button>
//                 <h4 class="modal-title" id="exampleFormModalLabel">Add Note</h4>
//             </div>
//             <div class="modal-body">
//                 <div class="row">
//                     <div class="col-xl-4 form-group">
//                         <input type="text" class="form-control" name="note" placeholder="Add note here">
//                     </div>
//                     <div class="col-md-12 float-right">
//                         <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button">Submit</button>
//                     </div>
//                 </div>
//             </div>
//         </form>
//     </div>
// </div>
// <div class="modal fade" id="workExperienceModal" aria-labelledby="workExperienceModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
//     <div class="modal-dialog modal-simple modal-center">
//         <form class="modal-content">
//             <div class="modal-header">
//                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
//                     <span aria-hidden="true">×</span>
//                 </button>
//                 <h4 class="modal-title" id="workExperienceModalLabel">Add Work Experience</h4>
//             </div>
//             <div class="modal-body">
//                 <div class="row">
//                     <div class="form-group" style="height: 20px;">
//                         <label class="col-sm-3 control-label">Job Title</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" name="job_title" id="awe-job-title" />
//                             <input type="hidden"  name="job_title_id" id="awe-job-title-id" />
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px;">
//                         <label class="col-sm-3 control-label">Company Name</label>
//                         <div class="col-sm-9">
//                             <input type="text" class="form-control" name="company_name" id="awe-company-name">
//                             <input type="hidden"  name="company_id"  id="awe-company-id"/>
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px;">
//                         <label class="col-sm-3 control-label">From</label>
//                         <div class="col-sm-9">
//                             <div class="input-daterange">
//                                 <div class="input-group col-sm-6">
//                                       <span class="input-group-addon">
//                                         <i class="icon wb-calendar" aria-hidden="true"></i>
//                                       </span>
//                                     <input type="text" class="form-control" id="awe-start" name="start">
//                                 </div>
//                                 <div class="input-group col-sm-6">
//                                     <span class="input-group-addon">to</span>
//                                     <input type="text" class="form-control" name="end" id="awe-end">
//                                 </div>
//                             </div>
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px;">
//                         <label class="col-sm-3 control-label">Description</label>
//                         <div class="col-sm-9">
//                             <textarea class="maxlength-textarea form-control" data-plugin="maxlength"  name="description" rows="5" maxlength="700" id="awe-description"></textarea>
//                         </div>
//                     </div>
//                     <div class="form-group" style="height: 20px;margin-top:75px;">
//                         <label class="col-sm-3 control-label"></label>
//                         <div class="col-sm-9">
//                             <div class="checkbox-custom checkbox-primary">
//                                 <input type="checkbox" id="awe-block" name="block" value="block" required="" data-fv-field="block">
//                                 <label for="awe-block">Block all recruiters from this company</label>
//                             </div>
//                         </div>
//                     </div>
//                     <div class="col-md-12 float-right">
//                         <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button" id="awe-submit">Submit</button>
//                     </div>
//                 </div>
//             </div>
//         </form>
//     </div>
// </div>
// 
// 
function BasicInfo(data, userType){
    this.template = `<div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title"></h3>
            <div class="panel-actions">
                <div class="dropdown">
                    <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" id="edit-user-top-info" title="Edit">
                        <i class="icon wb-pencil" aria-hidden="true"></i>
                    </a>
                    <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="true" id="edit-user-top-info-cancel" title="Cancel" style="display: none;">
                        <i class="icon wb-close" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
        <div style="width:100%;text-align: center;padding-top:10px;">
            <img src="{src}" id="user-top-info-avatar" style="width:100px;height:100px;border-radius:1000px;"/>
        </div>
        <div class="panel-body">
            <form id="exampleStandardForm" autocomplete="off" class="form-horizontal">
                <div class="row row-lg">
                    <div class="col-lg-6 form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Email</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="user-top-info-email" name="email" value="{email}" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Mobile</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="user-top-info-mobile" name="phone_num" value="{phone}" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">First Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="first_name" id="user-top-info-firstname" value="{firstName}" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Last Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="last_name" id="user-top-info-lastname" value="{lastName}" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Date of Birth</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="birthdate" data-plugin="datepicker" id="user-top-info-birthdate" value="{birthday}" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Password</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" name="password" id="user-top-info-password" value="{password}" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">User Type</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" name="user_type" id="user-top-info-usertype" disabled>
                                    <option value="0" {userTypeUnknown}>Unknown</option>
                                    <option value="job_seeker" {userTypeSeeker}>Jobseeker</option>
                                    <option value="recruiter" {userTypeRecruiter}>Recruiter</option>
                                    <option value="job_seeker-recruiter" {userTypeBoth}>Jobseeker & Recruiter</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Status</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" name="is_restricted" id="user-top-info-userstatus" disabled>
                                    <option value="0" {statusUnknown}>Unknown</option>
                                    <option value="active" {statusActive}>Activate</option>
                                    <option value="inactive" {statusDeactive}>Deactivate</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Gender</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" name="genders" id="user-top-info-gender" disabled>
                                    <option value="0" {genderUnknown}>Unknown</option>
                                    <option value="male" {genderMale}>Male</option>
                                    <option value="female" {genderFemale}>Female</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Age</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="age" id="user-top-info-age" value="{age}" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-lg-12 text-right padding-top-m" id="edit-user-top-info-submit" style="display: none;">
                        <button type="submit" class="btn btn-primary" id="validateButton2">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>`;
    this.basicData = {
        src : data['avatar'].length == 0 ? '../_resource/images/avatar.jpg' : data['avatar'],
        email : data['email'],
        phone : data['phone_num'],
        firstName : data['first_name'],
        lastName : data['last_name'],
        birthday : '',
        password : data['uuid'],
        userTypeUnknown : userType == false ? 'selected="selected"' : '',
        userTypeSeeker : userType == 'seeker' ? 'selected="selected"' : '',
        userTypeRecruiter : userType == 'recruiter' ? 'selected="selected"' : '',
        userTypeBoth : userType == 'seeker-recruiter' ? 'selected="selected"' : '',
        statusUnknown : data['status_key'].length == 0 ? 'selected="selected"' : '',
        statusActive : data['status_key'] == 'active' ? 'selected="selected"' : '',
        statusDeactive : data['status_key'] == 'deactive' ? 'selected="selected"' : '',
        genderUnknown : data['gender'].length == 0 ? 'selected="selected"' : '',
        genderMale : data['gender'] == 'male' ? 'selected="selected"' : '',
        genderFemale : data['gender'] == 'female' ? 'selected="selected"' : '',
        age : data['age'],
    };

    this.show = function(){
        return Api.render(this.template, this.basicData);
    }

    this.bindUpdate = function(){
        $('#edit-user-top-info').click(function(){
            $('#edit-user-top-info-cancel').css('display', 'inline-block');
            // $('#user-top-info-email, #user-top-info-mobile, #user-top-info-usertype, #user-top-info-firstname, #user-top-info-userstatus, #user-top-info-lastname, #user-top-info-gender, #user-top-info-birthdate, #user-top-info-age, #user-top-info-password').removeAttr('disabled');
            $('#user-top-info-firstname, #user-top-info-lastname, #user-top-info-gender, #user-top-info-age').removeAttr('disabled');
            $('#edit-user-top-info-submit').css('display', 'inline-block');
            return false;
        });
    }

    this.bindUpdateCancel = function(){
        $('#edit-user-top-info-cancel').click(function(){
            $(this).css('display', 'none');
            // $('#user-top-info-email, #user-top-info-mobile, #user-top-info-usertype, #user-top-info-firstname, #user-top-info-userstatus, #user-top-info-lastname, #user-top-info-gender, #user-top-info-birthdate, #user-top-info-age, #user-top-info-password').attr('disabled', 'disabled');
            $('#user-top-info-firstname, #user-top-info-lastname, #user-top-info-gender, #user-top-info-age').attr('disabled', 'disabled');
            $('#edit-user-top-info-submit').css('display', 'none');
            return false;
        });

    }

    this.bindUpdateSubmit = function(){
        $('#edit-user-top-info-submit').click(function(){
            // var email = $('#user-top-info-email').val(),
                // mobile = $('#user-top-info-mobile').val(info['mobile']),
                // userType = $('#user-top-info-usertype').val(),
            var firstName = $('#user-top-info-firstname').val(),
                // userStatus = $('#user-top-info-userstatus').val(),
                lastName = $('#user-top-info-lastname').val(),
                gender = $('#user-top-info-gender').val(),
                // birthDate = $('#user-top-info-birthdate').val(),
                age = $('#user-top-info-age').val();
                // password = $('#user-top-info-password').val(),
                // country_code = '000000',
                // address = '',
                // postal_code = '000000'.
                // countryKey = '',
                // regionKey = '',
                // locationKey = '',
                // website = '',
                // description = '',
                // xpLvlKey = '',
                // employmentStatusKey = '';
            var userData = {
                uid : Api.Params()['id'],
                first_name : firstName,
                last_name : lastName,
                gender : gender,
                age : age,
                // country_code : countryCode,
                // address : address,
                // postal_code : postalCode,
                // country_key : countryKey,
                // region_key : regionKey,
                // location_key : locationKey,
                // website : website,
                // description : description,
                // xp_lvl_key : xpLvlKey,
                // employment_status_key : employmentStatusKey,
            };
            Api.Put('updateUserTopInfo', userData, function(object, error){
                if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                    $.showSuccess('Update user info successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, {uid:true});
            return false;
        });       
    }
}